/**
 * @Description:登录主入口
 * @author 云离
 * @date: 2018/12/28
 */
import React, { Component } from 'react'
import {message, Button, Modal, Input, Form, Row, Col, Table, Pagination, Spin, Tag} from 'antd'
import axios from "../../../../apis/api";
import qs from "qs";
import {connect} from "react-redux";

const statusMap = {
    '0': {
        label: '正常',
        class: '#108ee9'
    },
    '1': {
        label: '停用',
        class: 'red'
    }
}
const mapStateToProps = (state, ownProps) => {
    return {
        user: state.main.user
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
    }
}

class BusinessInfo extends Component {

    state = {
        loading: false,
        pageSize: 10,
        curPage: 1,
        tableData: {
            total: 0,
            rows: []
        },
        userInfo: {}
    }

    componentDidMount() {
        this.init()
    }
    init = async () => {
        this.searchTable()
        this.searchUserInfo()
    }
    searchUserInfo = async () => {
        const {user} = this.props
        try {
            const userInfoResult = await axios.get(`/system/user/getBusiness/${user.userId}`)
            console.log(userInfoResult)
            if (userInfoResult.code === 0) {
                this.setState({
                    userInfo: userInfoResult.data.business
                })
            }else {
                message.error(userInfoResult.msg)
            }
        }catch (e) {
            console.log(e)
            message.error(e.message)
        }
    }

    searchTable = async () => {
        const {user} = this.props
        const {pageSize, curPage} = this.state
        try {
            this.setState({
                loading: true
            })
            const query = {
                orderByColumn: '',
                isAsc: 'asc',
                pageSize,
                pageNum: curPage
            }
            const result = await axios.post(`/channel/businessRate/list/${user.userId}`, qs.stringify(query))
            if (result.code === 0) {
                this.setState({
                    tableData: result,
                    loading: false,
                    selectedRowKeys: [],
                })
            } else {
                this.setState({
                    loading: false
                })
                message.error(result.msg)
            }
        } catch (e) {
            this.setState({
                loading: false
            })
            message.error(e.message)
        }
    }
    //翻页
    handlePageChange = (page, pageSize) => {
        this.setState({
            curPage: page
        },this.searchTable)
    }

    onShowSizeChange = (current, pageSize) => {
        this.setState({
            pageSize: pageSize,
            curPage: current,
        }, this.searchTable)
    }

    render() {
        const {loading, tableData, curPage, pageSize, userInfo} = this.state
        const {user} = this.props
        const columns = [{
            title: '商户名称',
            dataIndex: 'businessName',
            key: 'businessName'
        },{
            title: '支付类型',
            dataIndex: 'payTypeLabel',
            key: 'payTypeLabel'
        },{
            title: '费率',
            dataIndex: 'payRate',
            key: 'payRate'
        },{
            title: '使用状态',
            dataIndex: 'useStatus',
            key: 'useStatus',
            render: (value, data) => {
                return <Tag color={statusMap[value].class} >
                    {statusMap[value].label}
                </Tag>
            }
        }]

        return (
            <Spin spinning={loading}>
                <div style={{marginBottom: 10}}>
                    <Row>
                        <Col span={6} style={{textAlign:'right'}}>商户编号：</Col>
                        <Col span={18}>{user.userId}</Col>
                    </Row>
                    <Row>
                        <Col span={6} style={{textAlign:'right'}}>api_key：</Col>
                        <Col span={18}>{userInfo.apiKey}</Col>
                    </Row>
                </div>
                <Table dataSource={tableData.rows} columns={columns} pagination={false} scroll={{x: true}} rowKey={'payerBusinessId'}/>
                <Pagination
                    style={{marginTop: 10, marginBottom: 20}}
                    total={tableData.total}
                    showTotal={total => `共 ${total} 项`}
                    pageSizeOptions={['10', '20', '50', '100', '500']}
                    showSizeChanger
                    onShowSizeChange={this.onShowSizeChange}
                    pageSize={pageSize}
                    current={curPage}
                    onChange={this.handlePageChange}
                />
            </Spin>
        )
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(BusinessInfo)
